<template>
  <div>
    <div style="margin-top:15px;height:30px;">
        <van-nav-bar title="验场" left-text="返回" left-arrow  @click-left="onClickLeft">
        </van-nav-bar>

       <div class="detail">
            <p class="p" style="margin-top:10px;"><span class="span">场地名称：</span><span>{{data.sitename}}</span></p>
            <p class="p"><span class="span">活动名称：</span><span>{{data.activityName}}</span></p>
            <p class="p"><span class="span">活动日期：</span><span>{{data.activityTime}}</span></p>
            <p class="p2">上传照片</p>
            <div>
              <ul>
                <li class="li" v-for="item in img" :key="item">
                   <span class="clear" @click="clear(item.path)"><van-icon name="clear" /></span>
                   <img class="img" :src="item.path">
                </li>
              </ul>
            </div>
            <p style="clear: both;float:left;    margin-top: 30px;">
                <!-- <van-icon name="add-o" size="1.5em"/> -->
                <van-uploader :after-read="onRead">
                  <van-icon name="add-o" />
                </van-uploader>
            </p>
        </div>
    </div>
  </div>
</template>
<script>
    import utils from "@/utils/Utils";
    import {
      NavBar,
      Icon,
      Uploader,
      Toast
    } from "vant";
    export default {
      components: {
        [NavBar.name]: NavBar,
         [Icon .name]:Icon,
         [Uploader.name]:Uploader,
         [Toast.name]:Toast
      },
      created() {

      },
      data() {
          return {
            data:{
              sitename:"上海1862时尚艺术中心",
              activityName:"玩转都市游乐场",
              activityTime:"2018-09-05",
            },
             img:[
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'},
                {path:'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'}
              ]
          };
      },

      methods: {
        onClickLeft() {
            utils.closeModal();
        },
        onRead(file) {
            console.log(file)
            var self=this;
            if(file instanceof Array){
              //  file.foreach(function(v,k){
              //      self.img.push({path:v.content});
              //  });
              var len=file.length;
              for(var i=0;i<len;i++){
                  self.img.push({path:file[i].content});
              }
            }else{
                self.img.push({path:file.content});
            }
        },
        clear(path){
          var self=this;
          var len=self.img.length;
          for(var i=0;i<len;i++){
              if(self.img[i].path==path){
                  self.img.splice(i,1);
                  return;
              }
          }
        }
      }
    };
</script>
<style lang="less">
  .detail{
    width:92%;
    margin:0 aut0;
    margin-top:10px;
    margin-left:4%;
  }
   .p{
    border: 1px solid #ddd;
    padding-left: 1.3%;
    border-radius: 10px;
    line-height: 35px;
    margin-top: -10px;
    background-color: #F6F6F6;
  }
  .span{
    font-family: PingFangSC-Regular;
    color: #AFAFAF;
  }
  .p2{
    font-family: PingFangSC-Semibold;
    color: #3C4350;
    text-align: left;
    font-weight: bold;
  }
  .li{
    width: 24%;
    height: 50px;
    float:left;
    margin-top: 15px;
  }
  .img{
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 98%;
    object-fit:cover;
    clear: both;
  }
  .clear{
    float: right;
  }
</style>
